{extend name="common:base" /}
{block name="page_title"}{$controllerName}列表{/block}
{block name="style"}
<link href="/static/daterangepicker/daterangepicker.css" rel="stylesheet">
<link href="/static/shop/fonts/iconfont.css" rel="stylesheet">
<style>
    .trhead td {  background:#efefef;text-align: center}
    .trbody td {  text-align: center; vertical-align:top;border-left:1px solid #f2f2f2;overflow: hidden; font-size:12px;}
    .trorder { background:#f8f8f8;border:1px solid #f2f2f2;text-align:left;}
    .ops { border-right:1px solid #f2f2f2; text-align: center;}
    .ops a,.ops span{
        margin: 3px 0;
    }
    .table-top .op:hover{
        color: #000;
    }
    .tables{
        border:1px solid #e5e5e5;
        font-size: 12px;
        line-height: 18px;
    }
    .tables:hover{
        border:1px solid #b1d8f5;
    }
    .table-row,.table-header,.table-footer,.table-top{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        -webkit-justify-content: center;
        -webkit-align-content: space-around;
        align-content: space-around;
    }
    .tables  .table-row>div{
        padding: 14px 0 !important;
    }
    .tables  .table-row.table-top>div{
        padding: 11px 0;
    }
    .tables    .table-row .ops.list-inner{
        border-right:none;
    }
    .tables .list-inner{
        border-right: 1px solid #efefef;
        vertical-align: middle;
    }
    /*
    .table-row .goods-des .title{
        width:180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    */
    .table-row .goods-des{
        width:300px;
        border-right: 1px solid #efefef;
        vertical-align: middle;
    }
    .table-row .list-inner{
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-align: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .saler>div{
        width:130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .table-row .list-inner.ops,  .table-row .list-inner.paystyle{
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: center;
        justify-content: center;
    }
    .table-header .others{
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-align: center;
    }
    .table-footer{
        border-top: 1px solid #efefef;
    }
    .table-footer>div, .table-top>div{
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        height:100%;
    }
    .fixed-header div{
        padding:0;
    }
    .fixed-header.table-header{
        display: none;
    }
    .fixed-header.table-header.active{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
    .shop{
        display: inline-block;
        width:48px;
        height:18px;
        text-align: center;
        border:1px solid #1b86ff;
        color: #1b86ff;
        margin-right: 10px;
    }
    .min_program{
        display: inline-block;
        width:48px;
        height:18px;
        text-align: center;
        border:1px solid #ff5555;
        color: #ff5555;
        margin-right: 10px;
    }
    .order-item-aops a{color:#999;display:inline-block;vertical-align:middle;}

    .goods-des .goods-item{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;margin: 10px 0}
    .goods-des .goods-info{-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;margin-left:10px;margin-right:10px;text-align:left;display: flex;align-items:center;
        justify-content:space-between;}
    .goods-des .goods-img{width:70px;height:70px;border:1px solid #efefef; padding:1px;}
</style>
{/block}
{block name="content"}
<div class="row">
    <div class="col-xs-1 goods-type-box">
        <div class="box box-solid">
            <div class="box-header with-border">
                <h3 class="box-title">订单管理</h3>
            </div>
            <div class="box-body no-padding">
                <ul class="nav nav-pills nav-stacked">
                    <li {if(1 == $show)}class="active"{/if}><a href="{:url('',['show'=>1])}">待发货<span class="pull-right total"></span></a></li>
                    <li {if(2 == $show)}class="active"{/if}><a href="{:url('',['show'=>2])}">待收货</a></li>
                    <li {if(3 == $show)}class="active"{/if}><a href="{:url('',['show'=>3])}">待付款</a></li>
                    <li {if(4 == $show)}class="active"{/if}><a href="{:url('',['show'=>4])}">已完成</a></li>
                    <li {if(5 == $show)}class="active"{/if}><a href="{:url('',['show'=>5])}">已关闭</a></li>
                    <li {if(6 == $show)}class="active"{/if}><a href="{:url('',['show'=>6])}">全部订单</a></li>
                </ul>
            </div>
            <!--
            <div class="box-header with-border">
                <h3 class="box-title">维权</h3>
            </div>
            <div class="box-body no-padding">
                <ul class="nav nav-pills nav-stacked">
                    <li {if(1 == $show)}class="active"{/if}><a href="{:url('',['show'=>1])}">维权申请<span class="pull-right total"></span></a></li>
                    <li {if(2 == $show)}class="active"{/if}><a href="{:url('',['show'=>2])}">维权完成</a></li>
                </ul>
            </div>
            -->
            <!-- /.box-body -->
        </div>
    </div>
    <div class="col-xs-11">
        <div class="box box-primary">
            <div class="box-header with-border">
                <div class="row">
                    <div class="col-xs-11">
                        <form method="get" class="form-inline" id="frmSearch" action="{:url('index')}">
                            <input type="hidden" name="show" value="{$show}">
                            <div class="page-toolbar">
                                <div class="input-group">
                                    <span class="pull-left">
                                        <div style="float:left">
                                            <input name="search[time_start]" type="hidden" value="{$search['time_start']}">
                                            <input name="search[time_end]" type="hidden" value="{$search['time_end']}">
                                        </div>
                                        <div class="btn-group btn-group-sm daterange-box" style="padding-right:0;">
                                            <button style="width:240px" class="btn btn-default daterange daterange-time btn-sm" type="button">
                                                <span class="date-title">订单时间</span>
                                            </button>
                                            <button class="btn btn-default btn-sm" type="button" onclick="clearTime(this)" placeholder="订单时间">
                                                <i class="fa fa-remove"></i>
                                            </button>
                                        </div>
                                    </span>
                                    <span class="input-group-addon">收货信息</span>
                                    <input type="text" class="form-control " name="search[book_info]" value="{model:safe_show model='search' field='book_info' /}" placeholder="收货人或收货电话">
                                    <input type="hidden" name="export" id="export" value="0">
                                    <span class="input-group-btn">
                                        <button type="button" data-export="0" class="btn btn-primary btn-submit" onclick="btnexport(this);"> 搜索</button>
                                        <button type="button" data-export="1" class="btn btn-success btn-submit" onclick="btnexport(this);">导出</button>
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="box-body">
                <div class="table-header" style="background:#f8f8f8;height: 35px;line-height: 35px;padding: 0 20px">
                    <div style="border-left:1px solid #f2f2f2;width:50%;text-align: left;">商品</div>
                    <div class="others">买家</div>
                    <div class="others">支付/配送</div>
                    <div class="others">价格</div>
                    <div class="others">操作</div>
                    <div class="others">状态</div>
                </div>
                {volist name="datas" id="v"}
                <div class="table-row"><div style="height:20px;padding:0;border-top:none;">&nbsp;</div></div>
                <div class="tables">
                    <div class="table-row table-top" style="padding:0  20px;background: #f7f7f7">
                        {include file="order/index_table_row_top" /}
                    </div>
                    <div class="table-row" style="margin:0  20px">
                        <div class="goods-des" style="width:50%;text-align: left">
                            {volist name="v['subs']" id="sub"}
                            {include file="order/index_table_row_goods_item" /}
                            {/volist}
                        </div>
                        <div class="list-inner saler" style="text-align: center;">
                            <div>
                                <a href="javascript:;">
                                    {$v['m_nickname']}
                                </a>
                                <br>
                                {$v['book_realname']}
                                <br>
                                {$v['book_mobile']}
                            </div>
                        </div>
                        <div class="list-inner paystyle" style="text-align:center;">
                            {if(0 != $v['status'])}
                            {if(1 == $v['status'])}
                            <label class='label label-default'>未支付</label>
                            {else /}
                                {if(!empty($v['pay_log']))}
                                    {volist name="v['pay_log']" id="pl"}
                                        <span>
                                            {switch pl['payment_method']}
                                            {case 1}
                                            <i class="icow icow-yue text-warning" style="font-size: 17px;"></i>
                                            {/case}
                                            {case 2}
                                            <i class="icow icow-kuajingzhifuiconfukuan text-danger" style="font-size:17px"></i>
                                            {/case}
                                            {case 3}
                                            <i class="icow icow-weixinzhifu text-success" style="font-size: 17px"></i>
                                            {/case}
                                            {case 4}
                                            <i class="icow icow-zhifubaozhifu text-primary" style="font-size: 17px"></i>
                                            {/case}
                                            {case 5}
                                            <i class="text-primary icow icow-icon" style="font-size: 17px"></i>
                                            {/case}
                                            {/switch}
                                            <span>{$orderPayLogSiteEnum['payment_method'][$pl['payment_method']]}</span>
                                            <span style="color:#F00;">￥{:number_format(($pl['money']/100),2)}</span>
                                        </span>
                                    {/volist}
                                {/if}
                            {/if}
                            {/if}
                            <span style="margin-top:5px;display:block;">快递</span>
                        </div>
                        <a class="list-inner" data-toggle="popover" data-html="true" data-placement="right" data-trigger="hover" data-content="{:getOrderPriceDetailByModel($v)}">
                            <div style="text-align:center">
                                ￥{:getOrderPayableByModel($v)}
                                {if(orderIsChangePrice($v))}
                                <label class="label label-danger">改</label>
                                {/if}
                                {if $v['dispatch_price']>0}
                                <br/>(含运费:￥{:getOrderPayableDispatchPriceByModel($v)})
                                {/if}
                            </div>
                        </a>
                        <div class="list-inner" style="text-align:center">
                            <a class="op text-primary" href="{:url('detail',['id'=>$v['id']])}">
                                查看详情
                            </a>
                            {if(3 == $v['status'])}
                            <a class="text-primary op" data-toggle="ajaxModal" title="查看物流" data-height="80%"
                               href="{:url('show_express',[ 'express'=>$v['oe_express'] , 'express_sn'=>$v['oe_express_sn']   ])}">
                                查看物流
                            </a>
                            {/if}
                        </div>
                        <div class="ops list-inner" style="line-height:20px;text-align:center">
                            {:widget('Order/ops_btns',['orderId'=>$v['id'],'orderStatus'=>$v['status']])}
                        </div>
                    </div>
                    {if !empty($v['remark'])}
                    <div class="table-row"><div style='background:#fdeeee;color:red;flex: 1;;'>买家备注: {$v['remark']}</div></div>
                    {/if}
                </div>
                {/volist}
            </div>
            <div class="box-footer clearfix">
                <div id="page1" class="pull-right"></div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script src="https://cdn.staticfile.org/bootstrap-daterangepicker/3.0.3/moment.min.js"></script>
<script src="/static/daterangepicker/daterangepicker.js"></script>
<script>
    $('[data-toggle="tooltip"]').tooltip("destroy").tooltip({
        container: $(document.body)
    });
    $('[data-toggle="popover"]').popover("destroy").popover({
        container: $(document.body)
    });
</script>
<script>
    var totalPages = {$totalPages};
    var pageIndex = {$pageIndex};
    laypage({
        cont: 'page1', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
        pages: totalPages, //通过后台拿到的总页数
        curr: pageIndex, //当前页
        skip: true, //是否开启跳页
        jump: function(obj, first){ //触发分页后的回调
            if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                location.href = "{$pageUrl|raw}" +  "&p=" + obj.curr
            }
        }
    });
</script>
<script>
    $(function(){
        $(".daterange.daterange-time").each(function(){
            var elm = this;
            var container =$(elm).parent().prev();
            var startInput = container.find(":input:first");
            var endInput = container.find(":input:last");
            var startInputDate = startInput.val();
            var endInputDate = endInput.val();
            var dpOptions = {
                timePicker: false
            };
            if(startInputDate.length && endInputDate.length){
                $(elm).find(".date-title").html(startInputDate + " 至 " + endInputDate);
                dpOptions['startDate'] = startInputDate;
                dpOptions['endDate'] = endInputDate;
            }
            $(this).daterangepicker(dpOptions, function(start, end){
                var startDate = start.format('YYYY-MM-DD');
                var endDate = end.format('YYYY-MM-DD');
                $(elm).find(".date-title").html(startDate + " 至 " + endDate);
                startInput.val(startDate);
                endInput.val(endDate);
            });
        });
    });
    function clearTime(obj){
        $(obj).prev().data('daterangepicker').setStartDate(moment().startOf('day'));
        $(obj).prev().data('daterangepicker').setEndDate(moment().endOf('day'));
        $(obj).prev().html("<span class=date-title>" + $(obj).attr("placeholder") + "</span>");
        $(obj).parent().prev().find("input").val("");
    }
</script>
<script>
    function btnexport(_obj) {
        $('#export').val($(_obj).data('export'));
        if(1 == $(_obj).data('export')){
            if(confirm('确定要按当前条件导出吗？数据量大的话可能会卡顿')){
                $('#frmSearch').submit();
            }
        }
        else{
            $('#frmSearch').submit();
        }
    }
</script>
{/block}